<!--  -->
<template>
  <div class="edit-article-sysconfig">
    <SetDesignDialog :title="title" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingDialog">
      <div class="edit-container-u" v-loading="loading">
        <el-tabs v-model="activeName">
          <el-tab-pane label="系统列表页设置" name="1" v-if="sysConfig.list">
            <el-form :label-width="formLabelWidth">
              <el-form-item label="显示结构" style="margin-bottom:0px;">
                <el-radio-group size="mini" v-model="sysConfig.list.structure">
                  <el-radio :label="1">上下结构</el-radio>
                  <el-radio :label="2">左右结构</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="分类样式" v-if="sysConfig.list.structure === 1" style="margin-bottom:0px;">
                <div class="icon-classifyType-list">
                  <ul class="clearfix">
                    <li v-for="clsf in 9" :key="clsf" :class="{selected: sysConfig.list.category1Style === clsf}"
                      @click="chooseCategory1Style(clsf)">
                      <div class="item">
                        <div class="icon"><i :class="['icon-type-h', 'icon-type-h' + clsf]"></i></div>
                      </div>
                    </li>
                  </ul>
                </div>
              </el-form-item>
              <el-form-item label="分类样式" v-if="sysConfig.list.structure === 2" style="margin-bottom:0px;">
                <div class="icon-classifyType-list">
                  <ul class="clearfix">
                    <li v-for="clsf in 6" :key="clsf" :class="{selected: sysConfig.list.category2Style === clsf}"
                      @click="chooseCategory2Style(clsf)">
                      <div class="item">
                        <div class="icon"><i :class="['icon-type-v', 'icon-type-v' + clsf]"></i></div>
                      </div>
                    </li>
                  </ul>
                </div>
              </el-form-item>
              <el-form-item label="显示分类方式" v-if="sysConfig.list.structure === 2" style="margin-bottom:0px;">
                <el-radio-group size="mini" v-model="sysConfig.list.sideclassification">
                  <el-radio :label="1">鼠标滑过</el-radio>
                  <el-radio :label="2">鼠标点击</el-radio>
                  <el-radio :label="3">全部展开</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="每页显示文章数" style="margin-bottom:0px;">
                <el-select size="mini" v-model="sysConfig.list.per_page" placeholder="请选择">
                  <el-option v-for="ind in 21" :key="ind + 3" :label="ind + 3" :value="ind + 3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="列表样式" style="margin-bottom:0px;">
                <div class="icon-classifyType-list">
                  <ul class="clearfix">
                    <li v-for="listitem in 7" :key="listitem" :class="{selected: sysConfig.list.style === listitem}"
                      @click="chooseListType(listitem)">
                      <div class="item">
                        <div class="icon"><i :class="['list-type', 'list-type' + listitem]"></i></div>
                      </div>
                    </li>
                  </ul>
                </div>
              </el-form-item>
              <el-form-item v-if="[1, 2, 3, 7].indexOf(sysConfig.list.style) > -1" label="图片移入效果"
                style="margin-bottom:0px;">
                <el-select size="mini" v-model="sysConfig.list.pic_animation" placeholder="请选择">
                  <el-option :label="'无效果'" :value="0"></el-option>
                  <el-option :label="'图片放大'" :value="1"></el-option>
                  <el-option :label="'图片上移'" :value="2"></el-option>
                  <el-option :label="'白色蒙版'" :value="3"></el-option>
                  <el-option :label="'灰色蒙版'" :value="4"></el-option>
                  <el-option :label="'反光线条'" :value="5"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="[1, 2, 3, 7].indexOf(sysConfig.list.style) > -1" label="图片显示比例"
                style="margin-bottom:0px;">
                <el-select size="mini" v-model="sysConfig.list.proportion" placeholder="请选择">
                  <el-option :label="'1:1'" :value="'1:1'"></el-option>
                  <el-option :label="'4:3'" :value="'4:3'"></el-option>
                  <el-option :label="'3:4'" :value="'3:4'"></el-option>
                  <el-option :label="'3:2'" :value="'3:2'"></el-option>
                  <el-option :label="'2:3'" :value="'2:3'"></el-option>
                  <el-option :label="'16:9'" :value="'16:9'"></el-option>
                  <el-option :label="'9:16'" :value="'9:16'"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="排序方式" style="margin-bottom:0px;">
                <el-radio-group size="mini" v-model="sysConfig.list.orderby">
                  <el-radio :label="1">按序号倒序</el-radio>
                  <el-radio :label="2">按序号顺序</el-radio>
                  <el-radio :label="3">按发布时间倒序</el-radio>
                  <el-radio :label="4">按发布时间顺序</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="文章打开方式" style="margin-bottom:0px;">
                    <el-radio-group size="mini" v-model="sysConfig.list.target">
                      <el-radio :label="'_self'">当前窗口</el-radio>
                      <el-radio :label="'_blank'">新开窗口</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="显示分类" style="margin-bottom:0px;">
                    <el-radio-group size="mini" v-model="sysConfig.list.showCategory">
                      <el-radio :label="0">不显示</el-radio>
                      <el-radio :label="1">显示</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="分类打开方式" style="margin-bottom:0px;" v-if="sysConfig.list.showCategory === 1">
                    <el-radio-group size="mini" v-model="sysConfig.list.categoryTarget">
                      <el-radio :label="'_self'">当前窗口</el-radio>
                      <el-radio :label="'_blank'">新开窗口</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="显示搜索" style="margin-bottom:0px;">
                    <el-radio-group size="mini" v-model="sysConfig.list.showSearch">
                      <el-radio :label="0">不显示</el-radio>
                      <el-radio :label="1">显示</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="显示时间" style="margin-bottom:0px;">
                    <el-radio-group size="mini" v-model="sysConfig.list.showDate">
                      <el-radio :label="0">不显示</el-radio>
                      <el-radio :label="1">显示</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="面包屑末级高亮" style="margin-bottom:0px;">
                <el-radio-group size="mini" v-model="sysConfig.list.crumbslasttext">
                  <el-radio :label="0">不高亮</el-radio>
                  <el-radio :label="1">高亮</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-divider content-position="left">标题设置</el-divider>
              <div>
                <el-row>
                  <el-col :span="12">
                    <FontFamily :defValue="sysConfig.list.titleStyle.fontFamily" title="字体"
                  :chgValue="(d)=>{sysConfig.list.titleStyle.fontFamily = d}" />
                  </el-col>
                  <el-col :span="12">
                    <FontSize :defValue="sysConfig.list.titleStyle.fontSize" title="字体大小"
                  :chgValue="(d)=>{sysConfig.list.titleStyle.fontSize = d}" />
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <Color :defValue="sysConfig.list.titleStyle.fontColor" title="字体颜色"
                  :chgValue="(d)=>{sysConfig.list.titleStyle.fontColor = d}" />
                  </el-col>
                  <el-col :span="12">
                    <Color :defValue="sysConfig.list.titleStyle.fontHoverColor" title="移入颜色"
                  :chgValue="(d)=>{sysConfig.list.titleStyle.fontHoverColor = d}" />
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <FontWeight :defValue="sysConfig.list.titleStyle.fontWeight" title="字体加粗"
                  :chgValue="(d)=>{sysConfig.list.titleStyle.fontWeight = d}" />
                  </el-col>
                  <el-col :span="12">
                    <FontStyle :defValue="sysConfig.list.titleStyle.fontStyle" title="字体倾斜"
                  :chgValue="(d)=>{sysConfig.list.titleStyle.fontStyle = d}" />
                  </el-col>
                </el-row>
              </div>
              <el-divider content-position="left">简介设置</el-divider>
              <el-form-item label="显示简介" style="margin-bottom:0px;">
                <el-radio-group size="mini" v-model="sysConfig.list.showSynopsis">
                  <el-radio :label="0">不显示</el-radio>
                  <el-radio :label="1">显示</el-radio>
                </el-radio-group>
              </el-form-item>
              <div v-if="sysConfig.list.showSynopsis === 1">
                <el-row>
                  <el-col :span="12">
                    <FontFamily :defValue="sysConfig.list.synopsisStyle.fontFamily" title="字体"
                    :chgValue="(d)=>{sysConfig.list.synopsisStyle.fontFamily = d}" />
                  </el-col>
                  <el-col :span="12">
                    <FontSize :defValue="sysConfig.list.synopsisStyle.fontSize" title="字体大小"
                    :chgValue="(d)=>{sysConfig.list.synopsisStyle.fontSize = d}" />
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <Color :defValue="sysConfig.list.synopsisStyle.fontColor" title="字体颜色"
                    :chgValue="(d)=>{sysConfig.list.synopsisStyle.fontColor = d}" />
                  </el-col>
                  <el-col :span="12">
                    <Color :defValue="sysConfig.list.synopsisStyle.fontHoverColor" title="移入颜色"
                    :chgValue="(d)=>{sysConfig.list.synopsisStyle.fontHoverColor = d}" />
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <FontWeight :defValue="sysConfig.list.synopsisStyle.fontWeight" title="字体加粗"
                    :chgValue="(d)=>{sysConfig.list.synopsisStyle.fontWeight = d}" />
                  </el-col>
                  <el-col :span="12">
                    <FontStyle :defValue="sysConfig.list.synopsisStyle.fontStyle" title="字体倾斜"
                    :chgValue="(d)=>{sysConfig.list.synopsisStyle.fontStyle = d}" />
                  </el-col>
                </el-row>
              </div>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="系统详细页设置" name="2" v-if="sysConfig.item">
            <el-form label-width="140px">
              <el-form-item label="显示作者" style="margin-bottom:0px;">
                <el-radio-group size="mini" v-model="sysConfig.item.isShowAuthor">
                  <el-radio :label="0">不显示</el-radio>
                  <el-radio :label="1">显示</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="显示来源" style="margin-bottom:0px;">
                <el-radio-group size="mini" v-model="sysConfig.item.isShowOrigin">
                  <el-radio :label="0">不显示</el-radio>
                  <el-radio :label="1">显示</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="显示浏览量" style="margin-bottom:0px;">
                <el-radio-group size="mini" v-model="sysConfig.item.isViewCount">
                  <el-radio :label="0">不显示</el-radio>
                  <el-radio :label="1">显示</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="显示分享" style="margin-bottom:0px;">
                <el-radio-group size="mini" v-model="sysConfig.item.isShare">
                  <el-radio :label="0">不显示</el-radio>
                  <el-radio :label="1">显示</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="显示返回按钮" style="margin-bottom:0px;">
                <el-radio-group size="mini" v-model="sysConfig.item.isShowBackBtn">
                  <el-radio :label="0">不显示</el-radio>
                  <el-radio :label="1">显示</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="显示上一个下一个" style="margin-bottom:0px;">
                <el-radio-group size="mini" v-model="sysConfig.item.showPrevNext">
                  <el-radio :label="0">不显示</el-radio>
                  <el-radio :label="1">显示</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="时间格式化" style="margin-bottom:0px;">
                <el-select size="mini" v-model="sysConfig.item.timeFormat" placeholder="请选择" style="width:200px;">
                  <el-option :label="'yyyy-MM-dd HH:mm:ss'" :value="'yyyy-MM-dd HH:mm:ss'"></el-option>
                  <el-option :label="'yyyy-MM-dd'" :value="'yyyy-MM-dd'"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="系统列表页默认文本" name="3" v-if="sysConfig.ltext">
            <el-form :label-width="formLabelWidth" @submit.native.prevent>
              <el-form-item label="您当前的位置" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.ltext.yourCurrentLocation" :maxlength="128" placeholder="请输入内容">
                </el-input>
              </el-form-item>
              <el-form-item label="搜索" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.ltext.lanSearch" :maxlength="128" placeholder="请输入内容">
                </el-input>
              </el-form-item>
              <el-form-item label="请输入搜索内容" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.ltext.lanSearchInput" :maxlength="128" placeholder="请输入内容">
                </el-input>
              </el-form-item>
              <el-form-item label="没有数据" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.ltext.noData" :maxlength="128" placeholder="请输入内容"></el-input>
              </el-form-item>
              <el-divider content-position="left">分页部分</el-divider>
              <el-form-item label="首页" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.ltext.pagingData.firstTabs" :maxlength="128"
                  placeholder="请输入内容"></el-input>
              </el-form-item>
              <el-form-item label="上一页" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.ltext.pagingData.prevTabs" :maxlength="128" placeholder="请输入内容">
                </el-input>
              </el-form-item>
              <el-form-item label="下一页" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.ltext.pagingData.nextTabs" :maxlength="128" placeholder="请输入内容">
                </el-input>
              </el-form-item>
              <el-form-item label="尾页" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.ltext.pagingData.lastTabs" :maxlength="128" placeholder="请输入内容">
                </el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="系统详细页默认文本" name="4" v-if="sysConfig.itext">
            <el-form label-width="140px" @submit.native.prevent>
              <el-form-item label="栏目" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.itext.column" :maxlength="128" placeholder="请输入内容"></el-input>
              </el-form-item>
              <el-form-item label="发布时间" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.itext.releaseTime" :maxlength="128" placeholder="请输入内容">
                </el-input>
              </el-form-item>
              <el-form-item label="作者" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.itext.authort" :maxlength="128" placeholder="请输入内容">
                </el-input>
              </el-form-item>
              <el-form-item label="来源" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.itext.origint" :maxlength="128" placeholder="请输入内容">
                </el-input>
              </el-form-item>
              <el-form-item label="返回（按钮）" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.itext.returnt" :maxlength="128" placeholder="请输入内容">
                </el-input>
              </el-form-item>
              <el-form-item label="分享" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.itext.shareadt" :maxlength="128" placeholder="请输入内容">
                </el-input>
              </el-form-item>
              <el-form-item label="浏览量" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.itext.browseVolume" :maxlength="128" placeholder="请输入内容">
                </el-input>
              </el-form-item>
              <el-form-item label="点击下载（按钮）" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.itext.downText" :maxlength="128" placeholder="请输入内容">
                </el-input>
              </el-form-item>
              <el-form-item label="点击浏览（按钮）" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.itext.onlineBrowseText" :maxlength="128" placeholder="请输入内容">
                </el-input>
              </el-form-item>
              <el-form-item label="没有数据" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.itext.noData" :maxlength="128" placeholder="请输入内容"></el-input>
              </el-form-item>
              <el-divider content-position="left">文章切换</el-divider>
              <el-form-item label="上一个" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.itext.prevText" :maxlength="128" placeholder="请输入内容">
                </el-input>
              </el-form-item>
              <el-form-item label="下一个" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.itext.nextText" :maxlength="128" placeholder="请输入内容">
                </el-input>
              </el-form-item>
              <el-form-item label="没有了" style="margin-bottom:0px;">
                <el-input size="mini" v-model="sysConfig.itext.prevNextNoData" :maxlength="128" placeholder="请输入内容">
                </el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import FontFamily from '@/components/common/design/dialog/component/formitem/FontFamily.vue'
import FontSize from '@/components/common/design/dialog/component/formitem/FontSize.vue'
import Color from '@/components/common/design/dialog/component/formitem/Color.vue'
import FontWeight from '@/components/common/design/dialog/component/formitem/FontWeight.vue'
import FontStyle from '@/components/common/design/dialog/component/formitem/FontStyle.vue'
import * as WindowType from '@/config/windowtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import * as DesignFunctions from '@/core/DesignFunctions.js'
import PubSub from 'pubsub-js'
// import * as functions from '@/core/functions.js'
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'currentIframeSrc'
    ])
  },
  created () {
    let EDIT_ARTICLE_SYSTEM_CONFIG_FUNCTION = (systemId) => {
      this.close()
      this.dialogShow = true
      this.loading = true
      let curpageName = true
      if (typeof (systemId) === 'object') {
        this.systemId = systemId.systemId
        curpageName = systemId.curpageName
      } else {
        this.systemId = systemId
      }
      if (curpageName) {
        // 通过请求后台获取当前页面数据
        // this.$post('/navigation/infos', {index: '2'}).then(response => {
        //   if (response && response.length > 0) {
        //     let pagedata = []
        //     pagedata = response
        // 通过请求后台获取当前页面数据
        this.$post('/page/infos').then(response => {
          if (response && response.pages) {
            let pagedata = []
            pagedata = initData(response.pages)
            // 找到当前的地址数据
            let uri = DesignFunctions.getUriByDesign(this.$store.state.host.id, this.$store.state.site.site.id, this.currentIframeSrc)
            if (uri === false) {
              return
            }
            if (uri.indexOf('?') !== -1) {
              let uriArray = uri.split('?')
              if (uriArray && uriArray[0]) {
                uri = uriArray[0]
              }
            }
            let page = null
            if (uri === '/index.html') {
              page = pagedata[0]
            } else {
              for (let i in pagedata) {
                if (pagedata[i].link === uri) {
                  page = pagedata[i]
                } else if (pagedata[i].children && pagedata[i].children.length > 0) {
                  for (let j in pagedata[i].children) {
                    if (pagedata[i].children[j].link === uri) {
                      page = pagedata[i].children[j]
                    } else if (pagedata[i].children[j].children && pagedata[i].children[j].children.length > 0) {
                      for (let k in pagedata[i].children[j].children) {
                        if (pagedata[i].children[j].children[k].link === uri) {
                          page = pagedata[i].children[j].children[k]
                        }
                      }
                    }
                  }
                }
              }
            }
            if (page) {
              this.currentPageName = page.title
            } else {
              console.warn('通过 uri 未能找到其对应的当前页面', uri, pagedata)
            }
          }
        })
      }
      // 通过请求后台获取系统配置数据
      this.$post('/system/sys-config', { systemId: this.systemId }).then(response => {
        if (response && response.sysConfig) {
          this.loading = false
          this.sysConfig = response.sysConfig
          this.systemName = response.system.name
          if (this.currentPageName) {
            this.title = this.currentPageName + ' - ' + response.system.name
          } else {
            this.title = response.system.name
          }
        } else {
          console.error('未能获取到系统配置！')
        }
        this.$nextTick(() => {
          if (this.$refs['settingDialog']) {
            this.$refs['settingDialog'].open()
          }
        })
      })
    }
    VueFunctions.method(WindowType.EDIT_ARTICLE_SYSTEM_CONFIG, EDIT_ARTICLE_SYSTEM_CONFIG_FUNCTION)
    PubSub.subscribe(WindowType.EDIT_ARTICLE_SYSTEM_CONFIG, (event, data) => {
      EDIT_ARTICLE_SYSTEM_CONFIG_FUNCTION(data)
    })
  },
  data () {
    return {
      formLabelWidth: '120px',
      dialogShow: false,
      loading: true,
      activeName: '1',
      title: '',
      systemId: -1,
      sysConfig: {},
      currentPageName: '',
      systemName: ''
    }
  },
  watch: {
    currentPageName: {
      handler (newValue) {
        if (newValue) {
          this.title = newValue + ' - ' + this.systemName
        } else {
          this.title = this.systemName
        }
      }
    }
  },
  methods: {
    chooseCategory1Style (clsf) {
      if (clsf === this.sysConfig.list.category1Style) {
        return
      }
      this.sysConfig.list.category1Style = clsf
    },
    chooseCategory2Style (clsf) {
      if (clsf === this.sysConfig.list.category2Style) {
        return
      }
      this.sysConfig.list.category2Style = clsf
    },
    chooseListType (listitem) {
      if (listitem === this.sysConfig.list.style) {
        return
      }
      this.sysConfig.list.style = listitem
    },
    close () {
      this.dialogShow = false
      this.loading = true
      this.activeName = '1'
      this.title = ''
      this.systemId = -1
      this.sysConfig = {}
      this.currentPageName = ''
      this.systemName = ''
    },
    saveclose () {
      this.save(() => { this.$refs['settingDialog'].close() })
    },
    save (callback) {
      this.loading = true
      this.$jpost('/system/update-article-sys-config', { systemId: this.systemId, sysConfig: this.sysConfig }).then(response => {
        if (response && response.id && parseInt(response.id) > 0) {
          if (typeof callback === 'function') {
            callback()
          }
          PubSub.publish(WindowType.REFRESH_ARTICLE_TABLELIST)
          this.loading = false
        } else {
          console.error('更新系统配置失败！')
        }
      })
    }
  },
  components: {
    SetDesignDialog,
    FontFamily,
    FontSize,
    Color,
    FontWeight,
    FontStyle
  }
}
/**
 * 构建初始化页面data的数据
 */
function initData (response) {
  if (!response || response.length < 1) {
    return []
  }
  let result = []
  for (let i in response) {
    let item = response[i]
    if (item.length > 0) {
      for (let j in item) {
        let ite = item[j]
        let pageType = 'custom'
        if (ite.type === 1) {
          pageType = 'custom'
        } else if (ite.type === 3) {
          pageType = 'external_link'
        } else if (ite.pageType === 4) {
          pageType = 'inside_link'
        } else if (ite.pageType === 2) {
          pageType = 'list'
        }
        let link = ''
        if (ite.type === 3 || ite.type === 4) {
          link = ite.url
        } else {
          link = '/' + ite.rewrite + '.html'
        }
        let systemId = -1
        if (ite.systemId) {
          systemId = ite.systemId
        }
        let element = {
          id: ite.pageId,
          index: 0,
          itemId: -1,
          link: link,
          pageId: ite.id,
          pageType: pageType,
          systemId: systemId,
          target: ite.target,
          text: ite.name,
          title: ite.name,
          status: ite.status,
          hide: ite.hide,
          children: []
        }
        if (parseInt(i) > 0 && result.length > 0) {
          result.forEach(el => {
            if (ite.parentId === el.pageId) {
              element.index = el.index + 1
              el.children.push(element)
            } else if (el.children.length > 0) {
              el.children.forEach(ele => {
                if (ite.parentId === ele.pageId) {
                  element.index = ele.index + 1
                  ele.children.push(element)
                }
              })
            }
          })
        } else {
          result.push(element)
        }
      }
    }
  }
  return result
}
</script>
<style scoped lang="scss">
.edit-container-u {
  min-height: 400px;
}
.icon-classifyType-list {
  ul {
    list-style: none;
  }
  li {
    float: left;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    .icon-type-h {
      background: url(~@/assets/images/menuH-type-img.png) no-repeat center;
      display: inline-block;
      *display: inline;
      *zoom: 1;
      vertical-align: middle;
      width: 84px;
      height: 58px;
    }
    .icon-type-h1 {
      background-position: -1px 0;
    }
    .icon-type-h2 {
      background-position: -105px 0;
    }
    .icon-type-h3 {
      background-position: -210px 0;
    }
    .icon-type-h4 {
      background-position: -315px 0;
    }
    .icon-type-h5 {
      background-position: -420px 0;
    }
    .icon-type-h6 {
      background-position: -525px 0;
    }
    .icon-type-h7 {
      background-position: -630px 0;
    }
    .icon-type-h8 {
      background-position: -1px -59px;
    }
    .icon-type-h9 {
      background-position: -105px -59px;
    }
    &.selected .icon-type-h{
      background-image: url(~@/assets/images/menuH-type-selected-img.png);
    }

    .icon-type-v {
      background: url(~@/assets/images/menuV-type-img.png) no-repeat center;
      display: inline-block;
      *display: inline;
      *zoom: 1;
      vertical-align: middle;
      width: 84px;
      height: 58px;
    }
    .icon-type-v1 {
      background-position: -1px 0;
    }
    .icon-type-v2 {
      background-position: -105px 0;
    }
    .icon-type-v3 {
      background-position: -210px 0;
    }
    .icon-type-v4 {
      background-position: -315px 0;
    }
    .icon-type-v5 {
      background-position: -420px 0;
    }
    .icon-type-v6 {
      background-position: -525px 0;
    }
    &.selected .icon-type-v{
      background-image: url(~@/assets/images/menuV-type-selected-img.png);
    }

    .list-type {
      background: url(~@/assets/images/newslist-type-img.png) no-repeat center;
      display: inline-block;
      *display: inline;
      *zoom: 1;
      vertical-align: middle;
      width: 86px;
      height: 58px;
    }
    .list-type1 {
      background-position: 0 0;
    }
    .list-type2 {
      background-position: -104px 0;
    }
    .list-type3 {
      background-position: -209px 0;
    }
    .list-type4 {
      background-position: -314px 0;
    }
    .list-type5 {
      background-position: -419px 0;
    }
    .list-type6 {
      background-position: -524px 0;
    }
    .list-type7 {
      background-position: -629px 0;
    }
    .list-type8 {
      background-position: 0 -59px;
    }
    .list-type9 {
      background-position: -104px -59px;
    }
    .list-type10 {
      background-position: -209px -59px;
    }
    .list-type11 {
      background-position: -314px -59px;
    }
    .list-type12 {
      background-position: -419px -59px;
    }
    .list-type13 {
      background-position: -524px -59px;
    }
    .list-type14 {
      background-position: -629px -59px;
    }
    .list-type15 {
      background-position: 0 -118px;
    }
    .list-type16 {
      background-position: -104px -118px;
    }
    .list-type17 {
      background-position: -209px -118px;
    }
    .list-type18 {
      background-position: -314px -118px;
    }
    .list-type19 {
      background-position: -419px -118px;
    }
    .list-type20 {
      background-position: -524px -118px;
    }
    &.selected .list-type{
      background-image: url(~@/assets/images/newslist-type-selected-img.png);
    }
  }
}
</style>
